<template>
	<view>
		<!-- #ifdef H5 -->
		<!-- <Header @back="back()" left-icon="back" left-text="" right-text="" title="详情设施"></Header> -->
		<!-- #endif -->
		<view class="photo-tab">
			<view @click="changeTab(0)" v-bind:class='{actives:tabIndex == 0}'>
				<text>相册</text>
			</view>
			<view @click="changeTab(1)" v-bind:class='{actives:tabIndex == 1}'>
				<text>视频</text>
			</view>
		</view>
		<view class="photo-list" v-if="tabIndex == 0">
			<view class="list-info">
				<block v-for="(item,index) in photo_list" :key="index">
					<view class="photo-item">
						<image :src="item"></image>
					</view>
				</block>
			</view>
		</view>
		<view class="vide-list" v-if="tabIndex == 1 && vido_list.videoPath != ''">
			<view class="list-info">
				<video :src="vido_list.videoPath" controls :poster="vido_list.videoimg"></video>
			</view>
		</view>
		<!-- <view class="vide-list" v-if="vido_list.videoPath == ''">
			<view class="list-info">
				<view class="noTime">
					暂无视频
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import Header from '../../components/header.vue';
	export default {
		data() {
			return {
				photo_list:[],
				vido_list:'',
				
				tabIndex : 0
			};
			
		},
		components: {
			Header,
		},
		onLoad(option) {
			console.log('option-----------------------------',option)
			if(option.active === '1'){
				
				this.tabIndex = 0;
					
				
			}else{
				this.tabIndex = option.active ? option.active : 0;
			}
			
				
				console.log("this.tabIndex ---------------->",this.tabIndex );
		
			var that = this;
			uni.getStorage({
				key:'photo_list',
				success:res=>{
					console.log(res)
					var temp = [];
					res.data.forEach(item => {
						item = that.pub.fmtImgUrl(item);
						temp.push(item);
					})
					that.photo_list = temp;
					uni.removeStorage({
						key:'photo_list',
						success:res=>{
							console.log("清除缓存photo_list");
						}
					})
				}
			});
			uni.getStorage({
				key:'vido_list',
				success:res=>{
					console.log(res)
					// var temp = [];
					// res.data.forEach(item => {
					// 	item = that.pub.fmtImgUrl(item);
					// 	temp.push(item);
					// })
					that.vido_list = res.data;
					uni.removeStorage({
						key:'vido_list',
						success:res=>{
							console.log("清除缓存vido_list");
						}
					})
				}
			});
			
			// that.photo_list.forEach(item=>{
			// 	item = that.pub.fmtImgUrl(item);
			// });
			console.log("this.photo_list----------->",this.photo_list);
		},
		methods:{
			changeTab(tabIndex){
				this.tabIndex = tabIndex;
				if(this.vido_list.videoPath == ''){
					console.log(this.vido_list)
					this.tabIndex = 0
					this.showError('暂无视频');
					return false;
					
				}else{
					console.log("shipin")
				}
				// tabIndex 
			},
			//公共弹窗
			showError(msg){
				uni.showToast({
					title:msg,
					icon: 'none',
					duration: 2000
				});
			},	
		}
		
	}
</script>

<style lang="scss">
	.noTime{
		font-size: 56upx;
		text-align: center;
		padding-top: 300upx;
		font-family: PingFang-SC-Bold;
		letter-spacing: 10upx;
	}
	.photo-tab{
		display: flex;
		justify-content: space-around;
		padding-top: 50upx;
		font-size: 30upx;
		.actives{
			font-weight: bold;
		}
	}
 .photo-list{
	 background: #fff;
	 .list-info{
		padding: 30upx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		
		justify-content: space-between;
		// align-items: center
		.photo-item{
			width: 48.6%;
			height: 300upx;
			margin-top: 20upx;
			image{
				width: 100%;
				height: 100%;
			}
		}
	 }
	 
 }
 .vide-list{
	 padding-top: 50upx;
	 display: flex;
	 // width: 100%;
	 justify-content: center;
	 video{
		 width: 680upx;
	 }
 }
</style>
